<template>
  <div class="page">
    <u-dropdown>
      <u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1"></u-dropdown-item>
      <u-dropdown-item v-model="value2" :title="options2[value2].label" :options="options2"></u-dropdown-item>
      <u-dropdown-item v-model="value3" :title="options3[value3].label" :options="options3"></u-dropdown-item>
    </u-dropdown>
    <div class="info-list">
      <div class="info-cell">
        <div>
          <u-icon name="volume-up" size="40"></u-icon>
          <span>李孜孜在办公室演示摄像头跌倒了</span>
        </div>
        <div class="cell-bottom">
          <u-icon name="clock" size="40"></u-icon>
          <span>2021-4-20 09:40</span>
          <sapn class="btn">未处理</sapn>
        </div>

      </div>

    </div>

  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      options1: [
        {
          label: '全部日期',
          value: 0,
        },
        {
          label: '指定日期',
          value: 1,
        }
      ],
      options2: [
        {
          label: '全部动态',
          value: 0,
        },
        {
          label: '未处理',
          value: 1,
        },
        {
          label: '已处理',
          value: 2,
        },
      ],
      options3: [
        {
          label: '全部人员',
          value: 0,
        }
      ],
    }
  },
}
</script>
<style scoped>
.page {
  width: 100%;
  min-height: 100vh;
  padding: 5px;
  box-sizing: content-box;
}
.info-cell{
  width: 100%;
  /*height: 50px;*/
  line-height: 30px;
  border-bottom: 1px #eee solid;
}
.info-cell span{
  margin-left: 10px;
  font-size: 16px;
  color: #606266;
}
.cell-bottom{

}
.btn{

}
</style>